<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JSON语法</title>
    <script>
        function f1(){
            // 在JSON的操作中,我们可以将一个JSON数组当做Java中的对象进行操作
            // 其值的内容是一系列的键值对
            // 其key相当于Java对象的属性名,其value相当于Java对象的属性值
            // 在JSON操作中,其可以通过对象.属性的方式对属性进行赋值与取值
            // 相当于Java中的set/get方法
            let user = {"id":1,"username":"德玛西亚","address":"王者荣耀"};
            // 取值,即get方法
            console.log("username:"+user.username);
            // 赋值,即set方法
            user.username = "虞姬";
            console.log("username:"+user["username"]);
            console.log("username:"+user['username']);
        }
        function f2(){
            let address = {"province":"江苏","city":"南京"};
            // user与user2是一致的,只是写法不一样
            let user = {"id":1,"username":"admin","password":"123456","address":address};
            let user2 = {"id":1,"username":"admin","password":"123456","address":{"province":"江苏","city":"苏州"}};
            // 当对象中包含对象的时候,语法同样与Java基本一致
            // 通过对象.对象属性.属性名进行操作
            // 也可以通过对象["对象属性"]["属性名"]
            // 这两种用法是可以混用的,但是开发中不建议混用
            console.log(user.address.province);
            console.log(user["address"]["province"]);
            console.log(user2["address"].city);
        }
        function f3(){
            let users = [{
                "id":1,
                "username":"虞姬",
                "address":"发育路"
            },{
                "id":2,
                "username":"甄姬",
                "address":"中路"
            },{
                "id":3,
                "username":"花木兰",
                "address":"对抗路"
            },{
                "id":4,
                "username":"李白",
                "address":"打野"
            },{
                "id":5,
                "username":"瑶",
                "address":"游走"
            }];
            console.log(users[0].username);
            console.log(users[1]["address"]);
        }
    </script>
</head>
<body>
<button onclick="f1()">基本用法</button><br/>
<button onclick="f2()">对象包含对象</button><br/>
<button onclick="f3()">对象数组</button><br/>
</body>
</html>